<template>
  <div>
    <el-row>
      <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
        >添加</el-button
      >
      <el-table
        :data="tableData"
        class="table-body"
        :header-cell-style="{ background: '#F4F6F9', color: '#1D2129' }"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          prop="username"
          label="登录名"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="姓名"
          width="220"
        ></el-table-column>
        <el-table-column prop="userTel" show-overflow-tooltip label="电话号码"></el-table-column>
        <el-table-column prop="orgName" label="部门"></el-table-column>
        <el-table-column prop="roleName" label="角色"></el-table-column>
        <el-table-column prop="userStatus" label="状态">
          <template slot-scope="scope">
            {{
              scope.row.userStatus === 0
                ? "正常"
                : scope.row.userStatus === 1
                ? "禁用"
                : "锁定"
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleCheck(scope.row.userId)"
              >编辑</el-button
            >
            <el-button type="text" @click="handleEnableUser(scope.row)">{{
              scope.row.userStatus === 0
                ? "禁用"
                : scope.row.userStatus === 1 || scope.row.userStatus === 2
                ? "启用"
                : ""
            }}</el-button>
            <el-button type="text" @click="handleDelete(scope.row.userId)"
              >删除</el-button
            >
            <el-button
              type="text"
              v-show="role"
              @click="handleReset(scope.row.userId)"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :count="Number(count)"
        :current="1"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-row>
    <Add ref="add" @getParentTableData="getParentTableData" />
    <Detail ref="detail" @getParentTableData="getParentTableData" />
    <resetPassword ref="password" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import Add from "./Add.vue";
import Detail from "./Detail.vue";
import { deleteUserApi, enableUserApi } from "@/api/modules/user.api";
import { localGet } from "@/util/util";
import resetPassword from "@/components/account/resetPassword";

export default {
  components: { Pagination, Add, Detail, resetPassword },
  props: ["tableData", "count"],
  data() {
    return {
      visible: false,
      id: "",
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      role: false,
    };
  },
  mounted() {
    const info = localGet("userInfo");
    this.role = info.supperAdmin;
  },
  methods: {
    handleSizeChange(pageSize) {
      this.page.pageNum = pageSize;
      this.$emit("getTableData", this.page);
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.$emit("getTableData", this.page);
    },
    handleCheck(id) {
      this.$refs.detail.init(id);
    },
    handleAdd() {
      this.$refs.add.init();
    },
    getParentTableData() {
      this.$emit("getTableData", this.page);
    },
    async handleDelete(id) {
      await deleteUserApi(id);
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData", this.page);
    },
    // 启用\禁用
    async handleEnableUser(row) {
      await enableUserApi({
        userId: row.userId,
        status: row.userStatus === 2 || row.userStatus === 3 ? 1 : 2,
      });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData", this.page);
    },
    handleReset(id) {
      this.$refs.password.init(id);
    },
  },
};
</script>
